<template>
  <div>
    <div class="tabs-top">
        <router-link to="/home/article/recommend" >推荐</router-link>
        <router-link to="/home/article/updated" @click="getList">最新</router-link>
        <img src="../assets/logo1.png" alt="" style="position: absolute;top: 20px;right: 20px;" width="64px" height="28px">
    </div>
    <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh"></van-pull-refresh>

      <!-- <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
  <van-cell v-for="item in list" :key="item" :title="item" />
  </van-list> -->

    <div class="list-item" v-for="item in list" :key="item.id" @click="$router.push(`/detail/${item.id}`)">
     <div class="header">
         <img :src="item.avatar" alt="" width="40px" height="40px">
         <div>
          <div>{{ item.stem }}</div>
          <div>
            <span>{{ item.creator }}</span>
            <span>|</span>
            <span>{{ item.createdAt }}</span>
          </div>
         </div>
     </div>
     <div class="content">
            {{ item.content }}
     </div>
     <div class="footer">
         <span>点赞 {{ item.likeCount }} </span>
         <span>|</span>
         <span>浏览量 {{ item.views }}</span>
     </div>
   </div>
  </div>
  
</template>

<script>

// import Bus from '@/router/eventbus';
import axios from 'axios'
// import { inject } from 'vue';
export default {
   data(){
     return{
       list:[],
       token:localStorage.getItem('token'),
       isLoading:false,
       finished:false,

     }
  },
   created(){
      //  console.log(this.token)
       this.getList()
              
   },
   methods:{
     async getList(){
      //eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjExNTQiLCJpYXQiOjE3MzY5MDYyMTQsImV4cCI6MTczNzE2NTQxNH0.YFKQhfjydXl6UPfkFYaj3ppSqDqZLVyGYumVuThhzuI
      //http://interview-api-t.itheima.net/admin/interview/query
      //get 请求

        const res=await axios.get('http://interview-api-t.itheima.net/admin/interview/query',{
          headers:{
            Authorization:`Bearer ${this.token}`
          },
          data:{
            current:1,
            pageSize:5
          }
        })
        console.log(res)
        this.list=res.data.data.rows
     },
     onRefresh(){
      setTimeout(() => {
        this.isLoading=true
        this.getList()
        this.isLoading=false
      }, 1000);
      
     },

     onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      // const res=this.getList()
      // this.list.push(res)

        // 加载状态结束
        // this.loading = false;

        // 数据全部加载完成
     
    },



   },
 

}
</script>

<style scoped lang="less">
   .list-item{
    width: 340px;
    height: 110px;
    // background-color: orange;
    border-top: 1px solid #999;
    border-bottom: 1px solid #999;
    margin: auto;
    .header{
      display: flex;
      font-size: 14px;

      img{
        margin-right: 20px;
      }

      span{
        font-size: 10px;
        color: #999;
      }
    }
   
    .content{
      font-size: 14px;
      margin: 6px 0;
      // 最多两行文本后面省略
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      color: #666;
    }

    .footer{
      font-size: 12px;
      color: #999;
    }

   }

   .tabs-top{
      padding: 11px 11px 0 11px;
      // display: flex;
      // position: fixed;
      // top: 0px;
       a{
          width: 28px;
          height: 44px;
          // a标签默认是行内元素
          display: inline-block;
          font-size: 14px;
          line-height: 44px;
          
          // border-bottom-width: 1px;

          // background-color: orange;
          margin-right: 20px;
          color: #999999;
           &:nth-child(2){
            width: 28px;
            height: 44px;
          }
          &:nth-child(2){
            width: 28px;
            height: 44px;
          }
          margin-right: 30px;

       }
       a.router-link-exact-active{
             color: black;
             border-bottom: 1px solid black;
       }
     }

</style>